<template>
  <div class="order-card">
    <div class="card-content">
      <Image class="card-image"
        :src="data.imageUrl || 'https://fastly.jsdelivr.net/npm/@vant/assets/card-thumb.png'"
        fit="contain" radius="4" />

      <div class="card-info">
        <div class="info-header">
          <h3 class="product-name">
            {{ data.cardProductName }}
          </h3>
          <span class="face-value">面值 ¥{{
            data.cardFacevalue }}</span>
        </div>

        <div class="info-meta">
          <span
            class="create-time">{{ data.customCreateTime }}</span>
          <Tag :type="OrderDetailTotalStatusType[
            data.totalStatus as any as keyof typeof OrderDetailTotalStatusType
          ]" plain>
            {{ data.totalStatus }}
          </Tag>
        </div>

        <div class="actual-amount face-value">
          合计：<span class="amount">¥{{
            data.totalAmount }}</span>
        </div>
        <div class="actual-amount face-value">
          结算：<span class="amount">¥{{
            data.successAmount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Image, Tag } from 'vant';
import { type PropType } from 'vue';

import { OrderDetailTotalStatusType } from '../const';
import type { CardOrderDetailItem } from '../models/CardOrderItem';

defineProps({
  data: {
    type: Object as PropType<CardOrderDetailItem>,
    required: true,
    default: () => ({}),
  },
});

</script>

<style lang="less" scoped>
.order-card {
  background: var(--van-background);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--van-coupon-shadow);
  margin: 12px;
  overflow: hidden;

  .card-content {
    display: flex;
    padding: 12px;
    gap: 12px;

    .card-image {
      width: 80px;
      height: 80px;
      flex-shrink: 0;
      background-color: var(--van-gray-1);
      border: 1px solid var(--van-border-color);
    }

    .card-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .info-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;

        .product-name {
          margin: 0;
          font-size: 15px;
          color: var(--van-text-color);
          max-width: 60%;
        }
      }

      .info-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;

        .create-time {
          font-size: 12px;
          color: var(--van-text-color-3);
        }
      }

      .actual-amount {
        margin-top: 8px;
        text-align: right;
        font-size: 13px;
        color: var(--van-text-color-2);

        .amount {
          color: var(--van-primary-color);
        }
      }

      .face-value {
        font-size: 12px;
        color: var(--van-text-color-2);
      }
    }
  }
}

// 暗黑模式适配
.van-theme-dark {
  .order-card {
    background: var(--van-gray-8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}
</style>
